<template>

   <div class="center">
     <header-tab
      :listArray="list"
      :current="current"
      @change="changeTab"
      ref="tab"
    >
    </header-tab>
    <!-- <component :is="currentView"></component> -->
    <router-view/>
   </div>
</template>

<script >
import HeaderTab from "@/components/tabs/HeaderTab";

  export default {
    name: "center",
    components: {
        HeaderTab,
      },
    provide(){
      return{
          changeTab:this.changeTab
      }
    },
    data() {
      return {
        list:[],
        current: 0,
        currentView: 'homoPage'
      };
    },
    created() {
      this.getlist();
    },
    methods: {
       getlist() {
        this.list = [
          { id: 1, name: "首页" ,view:"/center/homePage"},
          { id: 2, name: "新闻通知" ,view:"/center/newsPage" },
          // { id: 3, name: "不良行为"  ,view:"/center/badBehaviorPage"},
          { id: 3, name: "表彰与惩罚"  ,view:"/center/commendPunishPage"},
          { id: 4, name: "信用评价"  ,view:"/center/creditPage"},
          // { id: 5, name: "质量信息" ,view:"/center/baseInfoPage" },
          { id: 6, name: "项目信息" ,view:"/center/projPublicInfoPage" },
          { id: 7, name: "从业单位"  ,view:"/center/workingUnitPage"},
          { id: 8, name: "从业人员"  ,view:"/center/workingPersonPage"},
          { id: 9, name: "举报投诉"  ,view:"/center/reportCenterPage"}
        ];
      },
      changeTab(index,tabview, e) {
        // this.currentView = tabview;   
        this.current = index;   // 高亮当前
        let tab = this.$refs.tab.$refs.headertab; // 包裹 ul的 div
        let tabitem = this.$refs.tab.$refs.tabitem;    // 包裹 li的 ul

        let winWidth = window.innerWidth;  // 当前屏幕的宽度
        let liList = e.target?e.target:e;   // 当前点击的li   
        if (liList) {  //  当前li左偏移, li的宽度, 中间值(当前屏幕的宽度 - li的宽度) /2, 目标值 (中间值 - 当前li左偏移), 整个ul的宽度
          let liLeft = liList.offsetLeft,
            liWidth = liList.offsetWidth,
            liCenter = (winWidth - liWidth) / 2,
            liTarget = liLeft - liCenter;
          let ulWidth = tabitem.offsetWidth;
          if (liTarget < 0) {
            tab.scrollLeft = 0;
            return;
          }

          if (liTarget < winWidth - ulWidth) {
            tab.scrollLeft = -(winWidth - ulWidth) + liWidth;
            return;
          }
          tab.scrollLeft = liTarget;
        }
      },
    }
  };
</script>
<style lang="less">
    // .tab{
    //   display: flex;
    //   width: 65%;
    //   height: 30px;
    //   line-height: 30px;
    //   background: #337BD7;
    //   position: absolute;
    //   z-index: 99999;
    //   margin-top: -102px;
    //   left:17.5%;
    // }
    //   .tab-item{
    //     flex:1;
    //     text-align:center;
    //     font-size: 14px;
    //     //font-family: Microsoft YaHei;
    //     //font-weight: bold;
    //     color: #FFFFFF;
    //   }
      .center{
        margin-top:0
      }
</style>